<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本使用 </title>
</head>
<body>
    <button id="btn">点击抽奖</button>
    <script>
        function rand(m, n){
            return Math.floor(Math.random()*(n-m) + 1);
        }
        /**
         * 点击按钮，2s后显示是否中奖，30%概率中奖
         * 中奖弹出   恭喜中奖，显示中间号码
         * 未中奖     再接再厉， 显示数字
         */ 
        btn.onclick = function(){
            // setTimeout(()=>{
            //     let num = rand(1,100);
            //     if(num <=30 ){
            //         alert('恭喜中奖,中奖号码为: '+ num);
            //     }else{
            //         alert('再接再厉,号码为：'+num);
            //     }
            // },2000);
            let p = new Promise((resolve, reject)=>{
                setTimeout(()=>{
                    let num = rand(1,100);
                    if(num <= 30){
                        resolve(num);
                    }else{
                        reject(num);
                    }
                },1000);
            })
            p.then((value)=>{
                alert('恭喜中奖，中奖号码：' + value);
            },(reason)=>{
                alert('谢谢参与，号码：' + reason);
            })

            console.log(p);
            // promiseState: promise对象的状态属性
            // 1. fulfilled 
            // 2. rejected
            // 3. pending
            // 状态只能从 pending->fulfilled
            //           pending-> rejected

            // promiseResult:promise 执行的结果

            // resolve 函数 作用
            // 1. 修改promise对象的状态
            //     pending->fulfilled
            // 2. 设置promise的结果值

            // reject 函数的作用
            // 1. 修改promise对象的状态
            //    pending->rejected
            // 2. 设置promise的结果值

            // then：用来指定成功或失败回调函数
            // 如果是 fulfilled -> 成功的回调
            // 如果是 rejected  -> 失败的回调
        }
    </script>
</body>
</html>